<template>
  <div class="main">
    <el-alert
      style="margin-bottom: 10px"
      title="基础案例"
      type="success"
      :closable="false"
      effect="dark"
    />
    <el-button size="mini" class="wsOpen" type="success" @click="openopen"
      >开启WebSocket</el-button
    >
    <el-button size="mini" class="clientSend" type="primary" @click="sendsend"
      >客户端发送消息</el-button
    >
    <el-button size="mini" class="closeWs" type="danger" @click="closeclose"
      >关闭WebSocket</el-button
    >
    <el-button size="mini" class="serverMsgs" type="info" @click="showMsgs"
      >刷新服务端推送的消息日志</el-button
    >
    <br />
    <br />
    <ul
      :key="isLog"
      v-infinite-scroll="load"
      class="infinite-list"
      style="overflow: auto"
    >
      <li v-for="i in logList" :key="i" class="infinite-list-item">{{ i }}</li>
    </ul>
    <el-divider />
    <el-alert title="消息推送" type="success" :closable="false" effect="dark" />
    <el-form :model="form" label-width="120px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="编辑消息">
            <el-input v-model="form.content" type="textarea" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="推送人员">
            <UserSelect style="width: 100%" multiple v-model="form.toUser"></UserSelect>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-row>
      <el-col :span="12" style="text-align: center">
        <el-button size="mini" type="primary" @click="sendMessage">发送消息</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import myWebSocket from "@/utils/ws";
import { ref, reactive, getCurrentInstance, watch } from "vue";
import { ElMessage } from "element-plus";
const myWs = new myWebSocket({});
let isLog = ref(true);
let logList = ref([]);
let form = reactive({
  content: "",
  toUser: "",
});
console.log(myWs.messageArr, "myWs.messageArrmyWs.messageArr");
const { proxy } = getCurrentInstance();

const load = () => {
  // logList.value = [...myWs.messageArr.value];
};
watch(
  myWs.messageArr,
  (newValue) => {
    console.log(newValue,'newValue');
    isLog.value = !isLog.value;
    logList.value.push(newValue) 
  },
  { immediate: true, deep: true }
);
const openopen = () => {
  myWs.createFn("/demo");
};
const closeclose = () => {
  myWs.closeFn();
};
const sendsend = () => {
  myWs.sendFn("sendMsg", "客户端发送消息：哇哇哇哇哇哇哇哇哇哇哇哇" + new Date());
};
const showMsgs = () => {
  isLog.value = !isLog.value;
};
const sendMessage = () => {
  // 指定派发消息
  console.log(form, "form");
  proxy.$socket.sendFn("sendInfo", form);
  ElMessage({
    message: "发送成功",
    type: "success",
  });
};
// onUnmounted(() => {
//   // 销毁断开连接
//   myWs.closeFn();
// })
</script>
<style lang="scss" scoped>
.infinite-list {
  height: 300px;
  padding: 0;
  margin: 0;
  list-style: none;
  border: 1px solid #ccc;
}

.infinite-list .infinite-list-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  background: var(--el-color-primary-light-9);
  margin: 10px;
  color: var(--el-color-primary);
}

.infinite-list .infinite-list-item + .list-item {
  margin-top: 10px;
}

.el-alert {
  margin-bottom: 10px;
}

.el-alert:first-child {
  margin: 0;
}
</style>
